PBA INSTITUTE

CSS LINKS

In CSS, links (anchor <a> tags) can be styled using properties like color, text-decoration, hover, visited, active, and focus. These properties allow designers to customize link appearance, including color, underline removal, hover effects (like color change and underlining), visited link styles, active link appearance when clicked, and focus styles for accessibility. Styling links enhances user experience by making them more visually distinct and interactive across web pages.

Here are some common CSS properties used to style links:

1. color: Sets the color of the text in the link.

														
														
<!DOCTYPE html>  
<html>  
<head>  
<style>  
  a {
  	color:tomato;
  }

</style>  
</head>  
<body>  
<a href="10.CSS font-family.html">FONTS</a>  
</body>  
</html>  


														
														
													

2. text-decoration: Sets the decoration of the link text, such as underline, overline, or none.

														
														
<!DOCTYPE html>  
<html>  
<head>  
<style>  
  a {
  	text-decoration: underline;
  	color: tomato;
  }

</style>  
</head>  
<body>  
<a href="10.CSS font-family.html">FONTS</a>  
</body>  
</html>  


														
														
													

3. hover: Specifies styles for links when the user hovers over them.

														
														
<!DOCTYPE html>  
<html>  
<head>  
<style>
a{
	color: tomato;
}  
a:hover {
  text-decoration: underline;/* underline on hover */
  color: blue;/* change color on hover */
  }
</style>  
</head>  
<body>  
<a href="10.CSS font-family.html">Fonts</a>  
</body>  
</html>  


														
														
													

4. visited: Specifies styles for links that have been visited by the user.

														
														
<!DOCTYPE html>  
<html>  
<head>  
<style>  
a:visited {
    color: purple;
}
</style>  
</head>  
<body>  
<a href="10.CSS font-family.html">Fonts</a>  
</body>  
</html>  


														
														
													

5. active: Specifies styles for links that are currently being clicked.

														
														
<!DOCTYPE html>  
<html>  
<head>  
<style>  
a:active {
    color: orange;
}
</style>  
</head>  
<body>  
<a href="10.CSS font-family.html">Fonts</a>  
</body>  
</html>  


														
														
													

6. focus: pecifies styles for links that are focused (e.g., when tabbed to).

														
														
<!DOCTYPE html>  
<html>  
<head>  
<style>  
a:focus {
    outline: thin dotted; /* example of focus style */
}
</style>  
</head>  
<body>  
<a href="10.CSS font-family.html">Fonts</a>  
</body>  
</html>  


														
														
													

Conclusion :

In conclusion, Styling links in CSS provides consistency, enhances user experience with clear visual feedback, and improves accessibility. It allows customization of colors, text decorations, and behaviors like hover and visited states, ensuring intuitive navigation. Overall, CSS enables designers to create cohesive, user-friendly websites that promote engagement and usability.

CSS LINKS

Conclusion :

CSS All Topics

SHARE